<template>
  <div>
     <!-- <div class="title"></div> -->
  <div class="container">
      <div class="manage">
        <el-menu 
        :default-active="activeIndex" 
        class="el-menu-demo" 
        mode="horizontal" 
        @select="handleSelect">
        <el-menu-item class="el-menu-item1" style="margin-left:50px" index="1">全部</el-menu-item>
        <el-menu-item class="el-menu-item1" index="2">待支付</el-menu-item>
        <el-menu-item class="el-menu-item1" index="3">已关闭</el-menu-item>
        <el-menu-item class="el-menu-item1" index="4">待确认</el-menu-item>
        <el-menu-item class="el-menu-item1" index="5">学习中</el-menu-item>
        <el-menu-item class="el-menu-item1" index="6">已完成</el-menu-item>
        </el-menu>
        <div class="line"></div>
     </div>
     <div class="searchform">
       <span>输入搜索</span> 
       <el-input 
          placeholder="请输入用户昵称或手机号"
          v-model="keyword"
          clearable>
        </el-input>
        <span>上次消费时间</span>
          <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
         <el-button type="primary" @click="seachhandle">查询</el-button>
         <el-button style="border-color:#eef2f6" @click="resethandle">重置</el-button>
        
     </div>
  </div>
</div>
 
</template>

<script>
export default {
    data() {
      return {
        activeIndex: '1',
        keyword:'',
        value1:'',
        choice:'',
        time1:'',
        time2:''
      };
    },
    methods: {

      handleSelect(key, keyPath) {
        this.choice=key
        this.$emit('parentselect',this.choice)
      },

      seachhandle(){
        console.log(this.value1);
        let time1=Date.parse(new Date(this.value1[0])).toString()
        let time2=Date.parse(new Date(this.value1[1])).toString()
        console.log(time1,time2);
        this.$emit('parenttime',{time1:this.time1,time2:this.time2})
        this.$emit('parenttrans',this.keyword)
      },

      resethandle(){
        this.$emit('parentreset')
      }


    }
}
</script>

<style lang="less" scoped>
.title{
  height: 60px;
}
.container{
  background-color: #fff;
  margin-bottom: 20px;
   height: 150px;
  .manage{
    display: flex;
    font-size:14px;
    margin-bottom: 26px;
    .el-menu-demo {
       height: 60px;
       display: flex;
      .el-menu-item1{
        box-sizing: border-box; 
        height: 62px;
        line-height: 0;
        padding-top: 30px;
        padding-bottom:14px;
        margin: 0 10px 0 10px;
      }
    }   
  }
  .searchform{
    .el-range-editor{
      margin-left:20px
    }
    span{
      margin-left: 30px;
      color:#33332e;
      font-weight:bold
    }
    .el-input--suffix{
      width: 200px;
      margin-left: 10px;
    }
    .el-button{
      width: 80px;
      margin-left: 30px;
      border-radius:6px
    }
  }
}
  

</style>